<template>
	<view class="container">
		<!-- 规则标题 -->
		<view class="rule-header">
			<view class="title">{{ruleDetail.title}}</view>
			<view class="meta-info">
				<view class="category-container">
					<text class="category">{{ruleDetail.category}}</text>
					<text class="subcategory" v-if="ruleDetail.subcategory">{{ruleDetail.subcategory}}</text>
				</view>
				<text class="views">{{ruleDetail.view_count}}次阅读</text>
			</view>
		</view>
		
		<!-- 规则内容 -->
		<scroll-view scroll-y class="content-scroll">
			<view class="rule-content">
				<!-- 根据内容类型采用不同的渲染方式 -->
				<block v-if="ruleDetail.content_type === 'html'">
					<rich-text :nodes="ruleDetail.content" class="rich-content" @tap="handleRichTextTap"></rich-text>
				</block>
				<block v-else>
					<rich-text :nodes="ruleDetail.content" @tap="handleRichTextTap"></rich-text>
				</block>
			</view>
			
			<!-- 附件区域 -->
			<view class="attachments-section" v-if="ruleDetail && ruleDetail.attachments && Array.isArray(ruleDetail.attachments) && ruleDetail.attachments.length > 0">
				<view class="section-title">附件资料</view>
				<!-- 图片附件 -->
				<view class="image-attachments" v-if="imageAttachments && imageAttachments.length > 0">
					<view class="sub-title">图片附件 ({{imageAttachments.length}})</view>
					<view class="attachments-grid">
						<view class="grid-item" 
							v-for="(item, index) in imageAttachments" 
							:key="index" 
							@click="previewImage(item)">
							<view class="grid-content">
								<image class="grid-image" :src="item.url || ''" mode="aspectFill"></image>
							</view>
							<view class="grid-name">{{item.name || ''}}</view>
						</view>
					</view>
				</view>
				
				<!-- 文档附件 -->
				<view class="doc-attachments" v-if="docAttachments && docAttachments.length > 0">
					<view class="sub-title">文档附件 ({{docAttachments.length}})</view>
					<view class="attachments-grid">
						<view class="grid-item doc-grid-item" 
							v-for="(item, index) in docAttachments" 
							:key="index" 
							@click="openDocument(item)">
							<view class="grid-content doc-grid-content">
								<text class="doc-icon">{{getDocIcon(item && item.name || '')}}</text>
							</view>
							<view class="grid-name">{{item && item.name || ''}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 标签 -->
			<view class="tags-section" v-if="ruleDetail && ruleDetail.tags && Array.isArray(ruleDetail.tags) && ruleDetail.tags.length > 0">
				<text class="tag-item" v-for="(tag, index) in ruleDetail.tags" :key="index">{{tag || ''}}</text>
			</view>
		</scroll-view>
		
		<!-- 底部工具栏 -->
		<view class="toolbar">
			<view class="tool-item" @click="toggleFavorite">
				<text class="tool-icon">{{isFavorited ? '❤️' : '♡'}}</text>
				<text class="tool-text">{{isFavorited ? '已收藏' : '收藏'}}</text>
			</view>
			<button class="tool-item share-btn" open-type="share">
				<text class="tool-icon">📤</text>
				<text class="tool-text">分享</text>
			</button>
			<button class="study-btn" @click="markAsLearned">{{studyBtnText}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ruleId: '',
				ruleDetail: {},
				content: '',
				relatedRules: [],
				isFavorited: false,
				favorite_loading: false,
				loading: false,
				startTime: null, // 添加学习开始时间
				isLearned: false, // 添加学习完成状态标记
				studyBtnText: '标记为已学习' // 添加按钮文本状态
			}
		},
		computed: {
			// 筛选图片附件
			imageAttachments() {
				if (!this.ruleDetail || !this.ruleDetail.attachments || !Array.isArray(this.ruleDetail.attachments)) {
					return [];
				}
				return this.ruleDetail.attachments.filter(item => 
					item && item.fileType === 'image' && item.url
				);
			},
			// 筛选文档附件
			docAttachments() {
				if (!this.ruleDetail || !this.ruleDetail.attachments || !Array.isArray(this.ruleDetail.attachments)) {
					return [];
				}
				return this.ruleDetail.attachments.filter(item => 
					item && item.fileType === 'document' && item.url
				);
			},
			// 判断是否有图片
			hasImages() {
				// 检查富文本内容中是否有图片
				const content = this.ruleDetail && this.ruleDetail.content ? this.ruleDetail.content : '';
				const hasContentImages = content.indexOf('<img') !== -1;
				
				// 检查附件中是否有图片
				const hasAttachmentImages = this.imageAttachments && this.imageAttachments.length > 0;
				
				return hasContentImages || hasAttachmentImages;
			}
		},
		onLoad(options) {
			this.startTime = Date.now(); // 记录学习开始时间
			
			if (options.id) {
				this.ruleId = options.id;
				// 获取规则详情
				this.getRuleDetail();
				// 检查是否已收藏
				this.checkFavorite();
				
				// 自动记录学习开始
				this.recordLearningStart();
			} else {
				uni.showToast({
					title: '缺少规则ID',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		// 页面卸载时记录学习时长
		onUnload() {
			if (this.ruleId && this.startTime && !this.isLearned) {
				this.updateLearningDuration();
			}
		},
		onReady() {
			// 页面渲染完成后，监听图片点击
			this.$nextTick(() => {
				// 延迟一点时间以确保富文本内容已完全渲染
				setTimeout(() => {
					this.setupImageClickListeners();
				}, 1000);
			});
		},
		methods: {
			// 自动记录学习开始
			async recordLearningStart() {
				const token = uni.getStorageSync('token');
				if (!token || !this.ruleId) return;
				
				console.log('自动记录学习开始:', this.ruleId);
				
				try {
					// 调用云对象记录学习开始
					const learningService = uniCloud.importObject('learning-service');
					const res = await learningService.addLearningRecord({
						contentId: this.ruleId,
						contentType: 'rule',
						title: this.ruleDetail.title || '', // 此时可能还没加载到标题
						summary: this.ruleDetail.summary || '',
						category: this.ruleDetail.category || '',
						token: token,
						completed: false, // 标记为未完成
						duration: 0 // 初始时长为0
					});
					
					console.log('记录学习开始成功:', res);
				} catch (err) {
						console.error('记录学习开始失败:', err);
					}
			},
			
			// 更新学习时长
			async updateLearningDuration() {
				const token = uni.getStorageSync('token');
				if (!token || !this.ruleId) return;
				
				// 计算学习时长(秒)
				const duration = Math.floor((Date.now() - this.startTime) / 1000);
				console.log('更新学习时长:', duration, '秒');
				
				try {
					// 调用云对象更新学习时长
					const learningService = uniCloud.importObject('learning-service');
					const res = await learningService.addLearningRecord({
						contentId: this.ruleId,
						contentType: 'rule',
						title: this.ruleDetail.title || '',
						summary: this.ruleDetail.summary || '',
						category: this.ruleDetail.category || '',
						subcategory: this.ruleDetail.subcategory || '',
						token: token,
						completed: false, // 保持未完成状态
						duration: duration
					});
					
					console.log('更新学习时长成功:', res);
				} catch (err) {
						console.error('更新学习时长失败:', err);
					}
			},
			
			// 获取规则详情
			async getRuleDetail() {
				uni.showLoading({
					title: '加载中...'
				});
				
				try {
					// 调用云对象获取规则详情
					const learningService = uniCloud.importObject('learning-service');
					const res = await learningService.getRuleDetail({
						ruleId: this.ruleId
					});
					
					if (res.code === 0) {
						this.ruleDetail = res.data.ruleDetail;
						this.relatedRules = res.data.relatedRules || [];
						} else {
							// 显示错误并返回上一页
							uni.showToast({
							title: res.message || '获取规则详情失败',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}
				} catch (err) {
						console.error('获取规则详情失败', err);
						// 显示错误并返回上一页
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
				} finally {
						uni.hideLoading();
					}
			},
			
			// 检查是否已收藏
			async checkFavorite() {
				const token = uni.getStorageSync('token');
				if (!token) return;
				
				try {
					// 调用云对象检查是否已收藏
					const interactionService = uniCloud.importObject('interaction-service');
					const res = await interactionService.checkFavorite({
						contentId: this.ruleId,
						contentType: 'rule',
						token: token
					});
					
					if (res.code === 0) {
						this.isFavorited = res.data.isFavorite;
						}
				} catch (err) {
						console.error('检查收藏状态失败', err);
					}
			},
			
			// 压缩图片
			compressImage(src) {
				return new Promise((resolve, reject) => {
					// 微信小程序压缩图片API
					wx.compressImage({
						src: src, // 图片路径
						quality: 80, // 压缩质量
						success: (res) => {
							console.log('图片压缩成功:', res.tempFilePath);
							resolve(res.tempFilePath);
						},
						fail: (err) => {
							console.error('图片压缩失败:', err);
							// 失败时返回原图片
							resolve(src);
						}
					});
				});
			},
			
			// 预览图片 - 添加压缩选项
			async previewImageWithCompression(urls, current, needCompress = false) {
				try {
					if (needCompress && urls.length > 0) {
						// 仅压缩当前显示的图片以提高性能
						const currentIndex = urls.indexOf(current);
						if (currentIndex !== -1) {
							const compressedUrl = await this.compressImage(current);
							urls[currentIndex] = compressedUrl;
						}
					}
					
					// 预览图片
					uni.previewImage({
						urls: urls,
						current: current || urls[0],
						success: () => {
							console.log('图片预览成功');
						},
						fail: (err) => {
							console.error('图片预览失败:', err);
						}
					});
				} catch (error) {
					console.error('图片预览处理失败:', error);
					// 降级处理，直接预览原图
					uni.previewImage({
						urls: urls,
						current: current || urls[0]
					});
				}
			},
			
			// 预览图片附件
			previewImage(item) {
				if (!item || !item.url) return;
				
				const urls = this.imageAttachments
					.filter(img => img && img.url)
					.map(img => img.url);
				
				if (urls.length === 0) return;
				
				this.previewImageWithCompression(urls, item.url, true);
			},
			
			// 为富文本内容中的图片添加点击事件监听
			setupImageClickListeners() {
				// 获取富文本中的所有图片URL
				const imageUrls = this.getAllRichTextImages();
				
				if (imageUrls.length === 0) {
					console.log('未在富文本中找到图片，无需设置点击监听');
					return;
				}
				
				console.log('为富文本中的图片设置点击监听，图片数量:', imageUrls.length);
				
				// 由于rich-text组件在小程序中不支持直接操作DOM，
				// 所以我们在整个rich-text上添加点击事件(已在模板中添加)
			},
			
			// 处理富文本内容点击事件
			handleRichTextTap(event) {
				// 获取富文本中的所有图片
				const imageUrls = this.getAllRichTextImages();
				
				if (imageUrls.length === 0) {
					console.log('未在富文本中找到图片');
					return;
				}
				
				// 预览所有图片
				this.previewImageWithCompression(imageUrls, imageUrls[0], false);
			},
			
			// 获取富文本中的所有图片链接 - 此方法在微信小程序环境中不适用，保留以备需要
			getAllRichTextImages() {
				// 使用正则表达式提取富文本内容中的所有图片URL
				let content = '';
				
				if (this.ruleDetail && this.ruleDetail.content) {
					content = typeof this.ruleDetail.content === 'string' 
						? this.ruleDetail.content 
						: JSON.stringify(this.ruleDetail.content);
				}
				
				if (!content) return [];
				
				// 使用正则表达式匹配图片URL
				const imgReg = /<img[^>]+src="([^"]+)"[^>]*>/g;
				const srcReg = /src="([^"]+)"/i;
				
				const imageUrls = [];
				let match;
				
				while ((match = imgReg.exec(content)) !== null) {
					const srcMatch = match[0].match(srcReg);
					if (srcMatch && srcMatch[1]) {
						imageUrls.push(srcMatch[1]);
					}
				}
				
				return imageUrls;
			},
			
			// 打开文档附件
			openDocument(item) {
				if (!item || !item.url) {
					uni.showToast({
						title: '文档链接无效',
						icon: 'none'
					});
					return;
				}
				
				// 先下载文档再打开
				uni.showLoading({
					title: '正在打开文档...'
				});
				
				// 下载文档
				uni.downloadFile({
					url: item.url,
					success: (res) => {
						if (res.statusCode !== 200) {
							uni.showToast({
								title: '文档下载失败',
								icon: 'none'
							});
							return;
						}
						
						const tempFilePath = res.tempFilePath;
						
						// 使用应用内置的文档查看器打开
						uni.openDocument({
							filePath: tempFilePath,
							success: function(res) {
								console.log('打开文档成功');
							},
							fail: function(err) {
								console.error('打开文档失败', err);
								uni.showToast({
									title: '无法打开该类型文档',
									icon: 'none'
								});
							}
						});
					},
					fail: (err) => {
						console.error('文档下载失败', err);
						uni.showToast({
							title: '文档下载失败',
							icon: 'none'
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			
			// 根据文件扩展名获取文档图标
			getDocIcon(filename) {
				if (!filename || typeof filename !== 'string') return '📄';
				try {
					const ext = filename.split('.').pop().toLowerCase();
					switch (ext) {
						case 'pdf':
							return '📕';
						case 'doc':
						case 'docx':
							return '📘';
						case 'ppt':
						case 'pptx':
							return '📙';
						case 'xls':
						case 'xlsx':
							return '📗';
						default:
							return '📄';
					}
				} catch (e) {
					console.error('获取文档图标出错:', e);
					return '📄';
				}
			},
			
			// 切换收藏状态
			toggleFavorite() {
				const token = uni.getStorageSync('token');
				
				if (!token) {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
					return;
				}
				
				(async () => {
					try {
						const interactionService = uniCloud.importObject('interaction-service');
						const res = await interactionService.toggleFavorite({
						contentId: this.ruleId,
						contentType: 'rule',
						title: this.ruleDetail.title,
						summary: this.ruleDetail.summary,
						category: this.ruleDetail.category,
						subcategory: this.ruleDetail.subcategory || '',
						token: token
						});
						
						if (res.code === 0) {
							this.isFavorited = res.data.isFavorite;
							uni.showToast({
								title: this.isFavorited ? '收藏成功' : '已取消收藏',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res.message || '操作失败',
								icon: 'none'
							});
						}
					} catch (err) {
						console.error('切换收藏状态失败', err);
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						});
					}
				})();
			},
			
			// 标记为已学习
			markAsLearned() {
				console.log('手动标记规则为已学习');
				
				// 检查是否登录
				const token = uni.getStorageSync('token');
				if (!token) {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
					return;
				}
				
				// 计算从开始到现在的学习时长(秒)
				const duration = this.startTime ? Math.floor((Date.now() - this.startTime) / 1000) : 600;
				console.log('标记规则为已学习:', this.ruleId, this.ruleDetail.title, '学习时长:', duration, '秒');
				
				// 调用云对象记录学习记录
				(async () => {
					try {
						const learningService = uniCloud.importObject('learning-service');
						const res = await learningService.addLearningRecord({
						contentId: this.ruleId,
						contentType: 'rule',
						title: this.ruleDetail.title,
						summary: this.ruleDetail.summary || '',
						category: this.ruleDetail.category || '',
						subcategory: this.ruleDetail.subcategory || '',
						token: token,
						completed: true,
						is_completed: true, // 添加is_completed字段确保兼容性
						duration: duration // 添加持续时间参数
						});
						
						console.log('标记学习完成响应:', res);
						if (res && res.code === 0) {
							this.isLearned = true; // 更新学习状态
							// 更新按钮文本（使用数据绑定而不是DOM操作）
							this.studyBtnText = '已学习';
							
							uni.showToast({
								title: '已标记为已学习',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res && res.message ? res.message : '操作失败',
								icon: 'none'
							});
						}
					} catch (err) {
						console.error('记录学习记录失败', err);
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						});
					}
				})();
			},
			
			// 打开相关规则
			openRelatedRule(item) {
				if (!item || !item._id) {
					uni.showToast({
						title: '无效的规则链接',
						icon: 'none'
					});
					return;
				}
				
				uni.navigateTo({
					url: `/pages/study/rule-detail?id=${item._id}`,
					fail: (err) => {
						console.error('导航到相关规则失败', err);
						uni.showToast({
							title: '打开页面失败',
							icon: 'none'
						});
					}
				});
			},
			onShareAppMessage() {
				return {
					title: this.ruleDetail.title || '足球裁判规则学习',
					path: `/packageStudy/study/rule-detail?id=${this.ruleId}`,
					imageUrl: '/static/logo.png',
					success: () => {
						console.log('分享成功');
						uni.showToast({
							title: '分享成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.error('分享失败', err);
					}
				};
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		width: 100%;
	}
	
	/* 规则标题样式 */
	.rule-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #EEEEEE;
		width: 100%;
		box-sizing: border-box;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
		word-wrap: break-word;
		word-break: break-all;
	}
	
	.meta-info {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.category-container {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 10rpx;
	}
	
	.category {
		font-size: 24rpx;
		color: #1BAE76;
		background-color: rgba(0, 127, 79, 0.1);
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}
	
	.subcategory {
		font-size: 24rpx;
		color: #FF7043;
		background-color: rgba(255, 112, 67, 0.1);
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}
	
	.views {
		font-size: 24rpx;
		color: #999999;
	}
	
	/* 内容区域样式 */
	.content-scroll {
		flex: 1;
		padding: 30rpx;
		width: 100%;
		box-sizing: border-box;
	}
	
	.rule-content {
		font-size: 28rpx;
		color: #333333;
		line-height: 1.8;
		width: 100%;
		box-sizing: border-box;
		word-wrap: break-word;
		word-break: break-all;
	}
	
	/* 富文本内容样式 */
	.rich-content {
		width: 100%;
	}
	
	.rich-content >>> img {
		max-width: 100% !important;
		height: auto !important;
		margin: 20rpx 0;
		border-radius: 8rpx;
		cursor: pointer;
		transition: opacity 0.2s ease;
	}
	
	.rich-content >>> img:active {
		opacity: 0.8;
	}
	
	.rich-content >>> h1 {
		font-size: 40rpx;
		font-weight: bold;
		margin: 30rpx 0 20rpx;
		color: #333;
	}
	
	.rich-content >>> h2 {
		font-size: 36rpx;
		font-weight: bold;
		margin: 26rpx 0 18rpx;
		color: #333;
	}
	
	.rich-content >>> h3 {
		font-size: 32rpx;
		font-weight: bold;
		margin: 22rpx 0 16rpx;
		color: #333;
	}
	
	.rich-content >>> p {
		margin: 16rpx 0;
		line-height: 1.8;
	}
	
	.rich-content >>> ul, 
	.rich-content >>> ol {
		padding-left: 40rpx;
		margin: 16rpx 0;
	}
	
	.rich-content >>> ul li {
		list-style: disc;
		margin: 10rpx 0;
	}
	
	.rich-content >>> ol li {
		list-style: decimal;
		margin: 10rpx 0;
	}
	
	.rich-content >>> blockquote {
		border-left: 6rpx solid #1BAE76;
		padding: 10rpx 20rpx;
		background-color: rgba(27, 174, 118, 0.05);
		margin: 20rpx 0;
		color: #666;
	}
	
	.rich-content >>> strong, 
	.rich-content >>> b {
		font-weight: bold;
	}
	
	.rich-content >>> em,
	.rich-content >>> i {
		font-style: italic;
	}
	
	.rich-content >>> div[style*="text-align: center"] {
		text-align: center;
	}
	
	.rich-content >>> div[style*="text-align: right"] {
		text-align: right;
	}
	
	.rich-content >>> table {
		width: 100%;
		border-collapse: collapse;
		margin: 20rpx 0;
	}
	
	.rich-content >>> table th,
	.rich-content >>> table td {
		border: 1rpx solid #ddd;
		padding: 16rpx;
	}
	
	.rich-content >>> table th {
		background-color: #f8f8f8;
		font-weight: bold;
	}
	
	.rule-content >>> img {
		max-width: 100%;
		height: auto;
		cursor: pointer;
		transition: opacity 0.2s ease;
	}
	
	.rule-content >>> img:active {
		opacity: 0.8;
	}
	
	/* 附件区域样式 */
	.attachments-section {
		margin-top: 40rpx;
		padding-top: 30rpx;
		border-top: 1rpx solid #EEEEEE;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
	
	.sub-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
	
	.attachments-grid {
		display: flex;
		flex-wrap: wrap;
	}
	
	.grid-item {
		width: 33.33%;
		padding: 20rpx;
	}
	
	.grid-content {
		width: 100%;
		height: 0;
		padding-bottom: 100%;
		position: relative;
		border-radius: 8rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	}
	
	.grid-image {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		object-fit: cover;
		transition: transform 0.3s ease;
	}
	
	.grid-item:active .grid-image {
		transform: scale(1.05);
	}
	
	.grid-name {
		font-size: 24rpx;
		color: #333333;
		margin-top: 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}
	
	.doc-grid-content {
		width: 100%;
		height: 0;
		padding-bottom: 100%;
		position: relative;
		background-color: #f7f7f7;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.grid-item:active .doc-grid-content {
		background-color: #e9e9e9;
	}
	
	.doc-icon {
		font-size: 80rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	/* 标签样式 */
	.tags-section {
		display: flex;
		flex-wrap: wrap;
		margin: 30rpx 0;
		width: 100%;
	}
	
	.tag-item {
		font-size: 24rpx;
		color: #1BAE76;
		background-color: rgba(0, 127, 79, 0.1);
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
	}
	
	/* 相关规则样式 */
	.related-section {
		margin-top: 40rpx;
		padding-top: 30rpx;
		border-top: 1rpx solid #EEEEEE;
	}
	
	.related-list {
		margin-top: 20rpx;
	}
	
	.related-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
	}
	
	.related-title {
		font-size: 28rpx;
		color: #333333;
	}
	
	.related-arrow {
		font-size: 28rpx;
		color: #CCCCCC;
	}
	
	/* 底部工具栏样式 */
	.toolbar {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-top: 1rpx solid #EEEEEE;
	}
	
	.tool-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 40rpx;
	}
	
	.tool-icon {
		font-size: 40rpx;
		margin-bottom: 6rpx;
	}
	
	.tool-text {
		font-size: 24rpx;
		color: #666666;
	}
	
	.study-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #1BAE76;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 40rpx;
	}
	
	/* 分享按钮样式 */
	.share-btn {
		background: none;
		border: none;
		margin: 0;
		padding: 0;
		line-height: normal;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 40rpx;
	}
	
	.share-btn::after {
		border: none;
	}
	
	/* 图片预览提示样式 */
	.image-preview-tip {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.05);
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.tip-icon {
		font-size: 28rpx;
		margin-right: 10rpx;
	}
	
	.tip-text {
		font-size: 24rpx;
		color: #666666;
	}
</style> 